import { HeartTwoTone, SmileTwoTone } from "@ant-design/icons";
import { PageContainer } from "@ant-design/pro-components";
import { useIntl } from "react-intl";
import { Alert, Card, Typography, Button } from "antd";
import { OPremission } from "@/components/OperationPremission";
import { list } from "@/api/index";
import React from "react";

const Admin: React.FC = () => {
  const intl = useIntl();
  const check = () => {
    list();
  };
  return (
    <PageContainer
      content={intl.formatMessage({
        id: "pages.admin.subPage.title",
        defaultMessage: "This page button does not have delete permission",
      })}
    >
      <ul>
        <li style={{ margin: "6px 0" }}>
          新增权限1：
          <OPremission type="add">
            <Button>新增</Button>
          </OPremission>
        </li>
        <li style={{ margin: "6px 0" }}>
          删除权限2：
          <OPremission type="delete">
            <Button>删除</Button>
          </OPremission>
        </li>
        <li style={{ margin: "6px 0" }}>
          编辑权限3：
          <OPremission type="edit">
            <Button type="primary">编辑</Button>
          </OPremission>
        </li>
        <li style={{ margin: "6px 0" }}>
          查看权限4：
          <OPremission type="view">
            <Button type="dashed">查看</Button>
          </OPremission>
        </li>
      </ul>
      <Card>
        <Alert
          message={intl.formatMessage({
            id: "pages.welcome.alertMessage",
            defaultMessage:
              "Faster and stronger heavy-duty components have been released.",
          })}
          type="success"
          showIcon
          banner
          style={{
            margin: -12,
            marginBottom: 48,
          }}
        />
        <Typography.Title level={2} style={{ textAlign: "center" }}>
          <SmileTwoTone /> Ant Design Pro{" "}
          <HeartTwoTone twoToneColor="#eb2f96" /> You
        </Typography.Title>
      </Card>
      <p style={{ textAlign: "center", marginTop: 24 }}>
        Want to add more pages? Please refer to{" "}
        <a
          href="https://pro.ant.design/docs/block-cn"
          target="_blank"
          rel="noopener noreferrer"
        >
          use block
        </a>
        。
      </p>
      <Button type="primary" onClick={check}>
        检查登录态，模拟登录失效
      </Button>
    </PageContainer>
  );
};

export default Admin;
